<template>
  <div class="container-special-session">
    <div class="wxkj-tab">
      <el-tabs v-model="listQuery.timeState" @tab-click="getList(1)">
        <el-tab-pane label="全部" name="0" />
        <el-tab-pane label="进行中" name="1" />
        <el-tab-pane label="未开始" name="2" />
        <el-tab-pane label="未发布" name="4" />
        <el-tab-pane label="已结束" name="3" />
      </el-tabs>
    </div>
    <div class="search-filter mt15">
      <el-row :gutter="20">
        <el-col :span="6">
          <sitem label="专场名称：">
            <el-input slot="item" v-model="listQuery.title" placeholder="请输入关键字" />
          </sitem>
        </el-col>
        <el-col :span="8">
          <sitem label="发布日期：">
            <el-date-picker
              slot="item"
              v-model="date"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy/MM/dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            />
          </sitem>
        </el-col>
        <!-- <el-form-item label="是否被推荐">
                <el-select clearable v-model="query.a" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
                </el-select>
            </el-form-item> -->
        <el-col :span="6">
          <sitem>
            <el-button slot="item" type="primary" icon="el-icon-search" @click="getList(1)">查询</el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>
    <!-- <div class="query-group">
      <el-form :inline="true">
        <el-form-item label="专场名称">
          <el-input v-model="listQuery.title" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="发布日期">
          <el-date-picker
            v-model="date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy/MM/dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList(1)">查询</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="content">
      <el-button type="primary" icon="el-icon-document-add" @click="editDrawerShow('创建专场')">创建专场</el-button>
      <div v-loading="listLoading" class="list mt15">
        <el-card v-for="(item,index) in list" :key="index" class="item mb15">
          <div class="upper">
            <div class="info">
              <div class="title overflow-ellipsis">{{ item.title }}</div>
              <div class="date">活动时间: {{ $moment(item.startTime, 'yyyy-MM-DD HH:mm:ss').format('yyyy年MM月DD日') }} - {{ $moment(item.endTime, 'yyyy-MM-DD HH:mm:ss').format('yyyy年MM月DD日') }}</div>
            </div>
            <div class="button-group mb20">
              <el-row>
                <el-button type="primary" size="small" plain @click="editResumeConfig(item)">简历配置</el-button>
                <el-button type="primary" size="small" plain @click="editDrawerShow('编辑专场',item)">编辑</el-button>
                <el-button v-if="!item.pubFlag" type="success" size="small" plain @click="publish(item)">发布</el-button>
                <el-button v-if="item.pubFlag" type="info" size="small" plain @click="noPublish(item.id)">取消发布</el-button>
                <el-button v-if="item.pubFlag && item.postShelfManage && (item.postStatus == '0' || item.postStatus == '2')" type="success" size="small" plain @click="postOnline(item)">岗位发布</el-button>
                <el-button v-if="item.pubFlag && item.postShelfManage && item.postStatus == '1'" type="info" size="small" plain @click="postOutline(item)">岗位关闭</el-button>
                <el-button size="small" plain @click="details(item.title,item.id,0)">详情</el-button>
                <el-button size="small" type="danger" plain @click="delItem(item.id)">删除</el-button>
                <!-- <el-button size="small">取消推荐</el-button> -->
              </el-row>
            </div>
          </div>
          <div class="lower">
            <div class="statistics">
              <span>职位<a @click="details(item.title,item.id,0)">{{ item.jobCount ? item.jobCount : 0 }}</a></span>
              <span>人才<a @click="details(item.title,item.id,1)">{{ item.userCount ? item.userCount : 0 }}</a></span>
            </div>
            <div class="state">
              {{ item.pubFlag ? $moment(item.pubTime).format( 'yyyy-MM-DD HH:mm:ss') + '发布' : '未发布' }}
            </div>
          </div>
        </el-card>
      </div>
      <no-data v-if="noDateView" />
    </div>

    <!-- 弹窗抽屉-->
    <edit-drawer ref="editDrawer" @refresh="pageGetList" />
    <edit-resume-config ref="editResumeConfig" @refresh="pageGetList" />

    <pagination
      v-show="total>0"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      page-background="none"
      @pagination="pageGetList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 分页
import editDrawer from './components/editDrawer'
import editResumeConfig from './components/editResumeConfig'// 修改简历配置
import sitem from '@/components/searchItem'
import noData from '@/components/noData'
import { listSpecialSession, publishSpecialSession, delSpecialSession, unPublishSpecialSession, postOnline, postOutline } from '@/api/special-session'
export default {
  name: 'SpecialSession',
  components: { Pagination, editDrawer, noData, sitem, editResumeConfig },
  props: {},
  data() {
    return {
      total: 1,
      list: [],
      title: '',
      date: null,
      noDateView: false,
      listLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        title: '',
        timeState: 0
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 修改简历配置
    editResumeConfig(data) {
      this.$refs.editResumeConfig.show('简历投递配置', data)
    },
    // 详情
    details(title, id, tabId) {
      this.$router.push({ name: 'special-session-details', params: {
        id: id,
        title: title,
        tabId: tabId
      }})
    },
    editDrawerShow(title, data) {
      this.$refs.editDrawer.show(title, data)
    },
    pageGetList() {
      this.getList()
    },
    // 获取列表数据
    getList(pageNo) {
      this.listLoading = true
      if (pageNo) {
        this.listQuery.pageNo = pageNo
      }
      const query = this.listQuery
      if (query.timeState == 4) {
        query.pubFlag = false
      } else {
        query.pubFlag = ''
      }
      if (this.date) {
        query.startTime = this.date[0]
        query.endTime = this.date[1]
      } else {
        query.startTime = ''
        query.endTime = ''
      }
      listSpecialSession(query).then(res => {
        const list = res.result.records
        // for(let i = 0;i < list.length; i++){
        //    list[i].startTime =
        // }
        this.list = list
        this.total = res.result.total
        this.listLoading = false
        if (list.length == 0) {
          this.noDateView = true
        } else {
          this.noDateView = false
        }
      })
    },
    // 发布
    publish(item) {
      this.$confirm('如果未完善专场职位信息，请点击详情对专场职位信息进行完善?', '提示', {
        confirmButtonText: '已完善去发布',
        distinguishCancelAndClose: true,
        cancelButtonText: '完善职位信息',
        type: 'warning'
      }).then(() => {
        publishSpecialSession({ id: item.id }).then(res => {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          this.getList()
        })
      }).catch(res => {
        if (res == 'cancel') {
          this.details(item.title, item.id, 0)
        }
      })
    },
    // 取消发布
    noPublish(id) {
      this.$confirm('确定要取消发布吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      }).then(() => {
        unPublishSpecialSession({ id: id }).then(res => {
          this.$message({
            message: '已取消',
            type: 'success'
          })
          this.getList()
        })
      }).catch(() => {

      })
    },
    // 岗位上线
    postOnline(item) {
      postOnline({ id: item.id }).then(res => {
        this.$message({
          message: '岗位上线成功',
          type: 'success'
        })
        this.getList()
      })
    },
    // 岗位下线
    postOutline(item) {
      this.$confirm('确定要岗位下线吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: 'warning'
      }).then(() => {
        postOutline({ id: item.id }).then(res => {
          this.$message({
            message: '岗位已下线',
            type: 'success'
          })
          this.getList()
        })
      }).catch(() => {

      })
    }, // 删除
    delItem(id) {
      this.$confirm('此操作将永久删除该专场信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSpecialSession({ id: id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    }
  }
}
</script>
<style lang="scss">
  .container-special-session{padding: 20px 0; padding-top: 15px;
    .query-group{
        margin-top: 20px;
    }
    .content{
        .list{
            .item{
                .upper{display: flex; align-items: center; justify-content: space-between;border-bottom: 1px solid #F3F3F3;
                    .title{font-size:16px;font-weight:bold;line-height:21px;color:#333333;width: 500px;}
                    .date{font-size:14px;font-weight:400;line-height:19px;color:#919191;margin-top: 15px;margin-bottom: 20px;}
                }
                .lower{display: flex; align-items: center; justify-content: space-between;font-size:14px;font-weight:400;line-height:19px;color:#999999;margin-top: 17px;
                    .statistics{
                        span{margin-right: 70px;
                            a{color: #333333;padding-left: 8px;color: #2D8BE9;}
                        }
                    }
                    .state{font-size: 12px;line-height: 16px;}
                }
            }
        }
    }

  }
</style>
